<!--
 * @Author: '浪川' '1214391613@qq.com'
 * @Date: 2025-09-20 10:58:04
 * @LastEditors: '浪川' '1214391613@qq.com'
 * @LastEditTime: 2025-10-10 16:59:50
 * @FilePath: \book-3d-show\src\pages\IndexPage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue"
import twin from "./twin" //获取到threejswebgl的渲染器对象
import { Sleep } from "src/utils/MyTimeUtil"
import { BookTypeEnum } from "src/enums/BookTypeEnum"
const webgl = ref(null as unknown as HTMLCanvasElement)

const lld_book = reactive({
  name: "lld",
  width: 1024,
  height: 1024,
  depth: 10,
  total: 14,
  radius: 80,
})

onMounted(() => {
  //webgl.value：表示ref值为webgl的div元素
  webgl.value.appendChild(twin.renderer.domElement)
  window.addEventListener("keydown", keyboard_down)
  twin.greate_book(lld_book, BookTypeEnum.BoBo)
})
onBeforeUnmount(() => {
  window.removeEventListener("keydown", keyboard_down)
})
const keyboard_down = (event: KeyboardEvent) => {
  if (event.key == "ArrowRight") {
    btn_down(1)
  } else if (event.key == "ArrowLeft") {
    btn_down(-1)
  }
}
/**
 *
 * @param event 方向量
 */
const btn_down = (dire: number) => {
  turn_page(dire)
  if (
    page_no.value + dire < lld_book.total / 2 + 1 &&
    page_no.value + dire >= 0
  ) {
    page_no.value += dire
  }
}

const page_contents = computed(() => {
  const arr = Array<number>()
  for (let i = 0; i < lld_book.total / 2 + 1; i++) {
    arr.push(i)
  }
  return arr
})

const page_no = ref(0)

const turn_page = (dire: number = 1, in_page_no: number = page_no.value) => {
  if (dire == 1 && in_page_no + dire < lld_book.total / 2 + 1) {
    // 如果为1 右翻页，且不大于总页数

    twin.keyboard("ArrowRight", {
      angle: Math.PI / 1,
      page_no: in_page_no,
    })
  }
  if (dire == -1 && in_page_no + dire >= 0) {
    // 如果为1 右翻页，且不大于总页数
    twin.keyboard("ArrowLeft", {
      angle: Math.PI / 1,
      page_no: in_page_no,
    })
  }
}
const select_value = ref(0)
// 当page_no 更新的时候 更新选择的值
watch(page_no, (new_val) => {
  // 先获取单位
  select_value.value = new_val
})

const slt_update = async (val: number) => {
  // 先获取单位
  const rurn_page_num = val - page_no.value
  if (rurn_page_num == 0) {
    return
  } else if (rurn_page_num > 0) {
    for (let i = 0; i < rurn_page_num; i++) {
      await Sleep(2000)
      btn_down(+1)
    }
  } else if (rurn_page_num < 0) {
    for (let i = 0; i > rurn_page_num; i--) {
      await Sleep(2000)
      btn_down(-1)
    }
  }
}
</script>

<template>
  <div>
    <div ref="webgl"><!-- 想在这里插入threejs canvas画布 --></div>
    <div>
      <div>
        <q-card class="floating-card">
          <q-card-section>
            <div class="row justify-center">
              <div class="col-2 q-ml-sm q-mr-sm">
                <q-btn
                  round
                  color="primary"
                  icon="arrow_back_ios"
                  v-on:click="btn_down(-1)"
                >
                </q-btn>
              </div>
              <div class="col-5 q-ml-sm q-mr-sm">
                <q-select
                  filled
                  v-model="select_value"
                  :options="page_contents"
                  option-label="desc"
                  @update:model-value="slt_update"
                  emit-value
                  style="width: 100%"
                />
              </div>
              <div class="col-2 q-ml-sm q-mr-sm">
                <q-btn
                  round
                  color="primary"
                  icon="arrow_forward_ios"
                  v-on:click="btn_down(+1)"
                >
                </q-btn>
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </div>
</template>

<style lang="sass" scoped>
.floating-card
  position: fixed;
  bottom: 1%; /* 距离底部的距离 */
  left: 50%; /* 将按钮的左边缘定位到屏幕中间 */
  transform: translateX(-50%); /* 向左移动按钮宽度的一半，实现真正居中 */
  z-index: 999; /* 确保按钮在其他元素之上 */
  width: 15%
</style>
